import React, { useState, useEffect } from 'react'
import styles from './index.module.scss'
import { Button, Grid, Modal } from 'antd-mobile'
import { Link } from 'react-router-dom'
import { getUserInfo, logout } from '@/api/user'
import { removeToken } from '@/utils/token'

function My ({ history }) {
  const [avatar, setAvatar] = useState('/img/profile/avatar.png')
  const [nickName, setNickName] = useState('游客')
  const [isLogin, setIsLogin] = useState(false)

  // 菜单数据
  const menus = [
    { id: 1, name: '我的收藏', iconfont: 'icon-coll', to: '/favorate' },
    { id: 2, name: '我的出租', iconfont: 'icon-index', to: '/rent' },
    { id: 3, name: '看房记录', iconfont: 'icon-record', to: '' },
    {
      id: 4,
      name: '成为房主',
      iconfont: 'icon-identity',
      to: ''
    },
    { id: 5, name: '个人资料', iconfont: 'icon-myinfo', to: '' },
    { id: 6, name: '联系我们', iconfont: 'icon-cust', to: '' }
  ]

  const getUserInfoData = async () => {
    const res = await getUserInfo()

    if (res.data.status === 200) {
      setAvatar(res.data.body.avatar)
      setNickName(res.data.body.nickname)

      setIsLogin(true)
    }
  }

  useEffect(() => {
    getUserInfoData()
  }, [])

  const userLogout = () => {
    Modal.alert('提示', '确定退出吗?', [
      { text: '取消', onPress: null },
      {
        text: '确定',
        onPress: async () => {
          const res = await logout()

          if (res.data.status === 200) {
            setIsLogin(false)
            setAvatar('/img/profile/avatar.png')
            setNickName('游客')

            // 把本地的token清除掉
            removeToken()
          }
        }
      }
    ])
  }

  return (
    <div>
      <div className={styles.title}>
        <img
          className={styles.bg}
          src='http://huangjiangjun.top:8088/img/profile/bg.png'
          alt=''
        />
        <div className={styles.info}>
          <div className={styles.myIcon}>
            <img
              className={styles.avatar}
              src={`${process.env.REACT_APP_BASEURL}${avatar}`}
              alt=''
            />
          </div>
          <div className={styles.user}>
            <div className={styles.name}>{nickName}</div>
            {isLogin && (
              <div className={styles.auth}>
                <span onClick={userLogout}>退出</span>
              </div>
            )}
            <div className={styles.edit}>
              {isLogin ? (
                <>
                  编辑个人资料
                  <span className={styles.arrow}>
                    <i className='iconfont icon-arrow' />
                  </span>
                </>
              ) : (
                <Button
                  onClick={() => history.push('/login')}
                  size='small'
                  type='primary'
                  inline
                >
                  去登录
                </Button>
              )}
            </div>
          </div>
        </div>
      </div>
      <Grid
        data={menus}
        columnNum={3}
        hasLine={false}
        square={false}
        renderItem={dataItem => (
          <Link key={dataItem.id} to={dataItem.to}>
            <div className={styles.menuItem}>
              <i className={`iconfont ${dataItem.iconfont}`} />
              <span>{dataItem.name}</span>
            </div>
          </Link>
        )}
      />
      <div className={styles.ad}>
        <img src='http://huangjiangjun.top:8088/img/profile/join.png' />
      </div>
    </div>
  )
}

export default My
